<template>
  <div class="dashboard-editor-container">
    <el-avatar shape="square" :size="100" fit="fit" :src="url"></el-avatar>
    <p>Welcome ~ {{ userInfo.userName }}</p>
    <p>用户权限：{{ userInfo.authName }}</p>
    <p v-if="userInfo.userStoreDTOList.length > 0">下辖店铺：<span v-for="item,index in userInfo.userStoreDTOList" :key="index">{{ item.storeName + " " }}</span></p>
  </div>
</template>

<script>
import { mapStores, mapActions } from 'pinia';
import { useUserInfoStore } from "../../store";
export default {
  name: 'Dashboard',
  components: {},
  data() {
    return {
      url: require('@/assets/img/user.jpg'),
      userInfo: {
        userStoreDTOList: [],
        authName: ""
      },
      authList: [
        {
          label: "工厂人员",
          value: "3"
        },
        {
          label: "设计人员",
          value: "2"
        },
        {
          label: "店铺运营人员",
          value: "1"
        },
        {
          label: "管理员",
          value: "0"
        },
        {
          label: "超级管理员",
          value: "9"
        },
      ]
    }
  },
  computed: {
    ...mapStores(useUserInfoStore),
  },
  created() {
    this.userInfo = useUserInfoStore().userInfo;
    this.authList.forEach(item => {
      if (this.userInfo.auth == item.value) {
        this.userInfo.authName = item.label;
      }
    })
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 50px 60px 0px;

  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }

  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;

    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
